var config = require('../../config');
const app = getApp();
Page({
  data: {
    footerHeight: 320, // 底部foot操作栏高度320rpx
    navH: app.globalData.navHeight, // 导航栏高度
    fileHost: app.globalData.imageUrl,
    windowHeight: (app.globalData.windowHeight - app.globalData.navHeight) / 2 - 120,
    windowWidth: app.globalData.windowWidth / 2 - 30, // 获取屏幕宽度,减去50rpx原因：为canvas两边留出25rpx空隙
    program: null,
    headerTempUrl: '',
    appletCodeTempUrl: '',
    radarImg: ''
  },
  onLoad(option) {
    wx.showLoading({ title: '生成中...', mask: true });
    let windowHeight = (app.globalData.windowHeight - app.globalData.navHeight) / 2 - 120;
    if (app.globalData.model === 'iPhone 5') {
      windowHeight = app.globalData.windowHeight / 2 - 120 - app.globalData.navHeight / (100 / 42) + 15;
    }
    this.setData({
      program: JSON.parse(option.program),
      windowHeight
    }, () => {
      this.createPoster();
    }
    );
  },
  onNavBack() {
    wx.navigateBack();
  },
  createPoster() {
    console.log('poster');
    // 获取图片资源 - 图片资源加载完在画布上才有后图像
    let appletCodeUuid = this.data.program.appletCodeUuid;
    let userLogoUuid = this.data.program.userLogoUuid;
    Promise.all([
      this.getImage(userLogoUuid, '用户头像下载失败'),
      this.getImage(appletCodeUuid, '二维码下载失败')
    ]).then(res => {
      this.drawImage(res);
    });
  },
  drawImage(res) {
    var cvsCtx = wx.createCanvasContext('posterCanvasId', this);
    // 上半部分颜色背景
    cvsCtx.setFillStyle('#EBEBEB');
    // fillRect(x, y, areaWidth, areaHeight)
    cvsCtx.fillRect(0, 0, this.data.windowWidth, this.data.windowHeight * 0.6);

    // 下半部分颜色背景
    cvsCtx.setFillStyle('#FFFEFF');
    // fillRect(x, y, areaWidth, areaHeight)
    cvsCtx.fillRect(
      0,
      this.data.windowHeight * 0.6,
      this.data.windowWidth,
      this.data.windowHeight * 0.4
    );
    cvsCtx.restore(); //恢复之前保存的绘图上下文

    // this.roundRect(cvsCtx, 10, 10, 25, 25, 4);
    // 渲染栏目logo图片 drawImage(url, x, y, contentWidth, contentHeight)
    cvsCtx.drawImage(`../../images/${config.theme.wechatLogo}`, 10, 10, 25, 25);
    cvsCtx.restore(); //恢复之前保存的绘图上下文

    // 渲染互动名称
    cvsCtx.setFontSize(16);
    cvsCtx.setFillStyle('#000000');
    cvsCtx.setFontSize(18);
    cvsCtx.fillText(`${config.theme.wechatName}`, 40, 30);

    // 渲染用户头像 drawImage(url, x, y, contentWidth, contentHeight)
    let headX = this.data.windowWidth / 2 - (app.globalData.model === 'iPhone 5' ? 35 : 50);
    let headY = this.data.windowHeight * 0.1;
    let contentWidth = app.globalData.model === 'iPhone 5' ? 75 : 100;
    let contentHeight = app.globalData.model === 'iPhone 5' ? 75 : 100;
    cvsCtx.save();
    cvsCtx.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    cvsCtx.arc(
      contentWidth / 2 + headX,
      contentHeight / 2 + headY,
      contentWidth / 2,
      0,
      Math.PI * 2,
      false
    );
    cvsCtx.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
    cvsCtx.drawImage(res[0], headX, headY, contentWidth, contentHeight);
    cvsCtx.restore(); //恢复之前保存的绘图上下文

    // 渲染提示语-"向你推荐给一个很棒的互动"
    cvsCtx.setFontSize(14);
    cvsCtx.setFillStyle('#4D4D4D');
    cvsCtx.setTextAlign('center');
    cvsCtx.fillText(
      '向你推荐给一个很棒的互动',
      this.data.windowWidth / 2,
      this.data.windowHeight * 0.36
    );

    // 渲染提示语-"栏目名称"
    cvsCtx.setFontSize(23);
    cvsCtx.setFillStyle('#4D4D4D');
    cvsCtx.setTextAlign('center');
    cvsCtx.fillText(
      `"${this.data.program.programName}"`,
      this.data.windowWidth / 2,
      this.data.windowHeight * 0.45
    );

    // 渲染互动提示背景色
    this.roundRectColor(
      cvsCtx,
      this.data.windowWidth / 2 - 100,
      this.data.windowHeight * (app.globalData.model === 'iPhone 5' ? 0.48 : 0.51),
      200,
      30,
      25
    );

    // 渲染提示语-"互动中"
    cvsCtx.setFontSize(14);
    cvsCtx.setFillStyle('#F8FCFE');
    cvsCtx.setTextAlign('center');
    cvsCtx.fillText(
      `互动中`,
      this.data.windowWidth / 2,
      this.data.windowHeight * 0.5 + (app.globalData.model === 'iPhone 5' ? 13 : 25)
    );

    // 渲染小程序码 drawImage(url, x, y, contentWidth, contentHeight)
    let appletY = this.data.windowHeight * 0.65;
    cvsCtx.drawImage(res[1], this.data.windowWidth / 2 - 50, appletY, 100, 100);

    // 渲染提示语-"长按识别小程序码,立即互动"
    cvsCtx.setFontSize(14);
    cvsCtx.setFillStyle('#BDBDBD');
    cvsCtx.setTextAlign('center');
    let tipHeight = appletY + (app.globalData.model === 'iPhone 5' ? 122 : 140);
    cvsCtx.fillText(
      `长按识别小程序码,立即互动`,
      this.data.windowWidth / 2,
      tipHeight
    );

    // 开始作画
    console.log('开始作画');
    let self = this;
    let windowHeight = this.data.windowHeight;
    let windowWidth = this.data.windowWidth;
    cvsCtx.draw(true, function () {
      console.log('draw回调函数');
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: windowWidth,
        height: windowHeight,
        canvasId: 'posterCanvasId',
        success: function (res) {
          console.log('canvas转为临时图片', res);
          self.setData({ radarImg: res.tempFilePath });
        }
      });
    });
    wx.hideLoading();
  },
  roundRectColor(context, x, y, w, h, r) {
    //绘制圆角矩形（纯色填充）-- for 互动中，后期考虑整合
    context.save();
    context.setFillStyle('#4D4D4D');
    context.setStrokeStyle('#4D4D4D');
    context.setLineJoin('round'); //交点设置成圆角
    context.setLineWidth(r);
    context.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
    context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
    //context.stroke();
    context.closePath();
  },
  roundRect(cvsCtx, x, y, w, h, r) {
    // 绘制矩形边角圆弧 - 互动logo，后期考虑整合
    cvsCtx.save();
    // 开始绘制
    cvsCtx.beginPath();
    // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
    // 这里是使用 fill 还是 stroke都可以，二选一即可
    cvsCtx.setFillStyle('transparent');
    // ctx.setStrokeStyle('transparent')
    // 左上角
    cvsCtx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);

    // border-top
    cvsCtx.moveTo(x + r, y);
    cvsCtx.lineTo(x + w - r, y);
    cvsCtx.lineTo(x + w, y + r);
    // 右上角
    cvsCtx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);

    // border-right
    cvsCtx.lineTo(x + w, y + h - r);
    cvsCtx.lineTo(x + w - r, y + h);
    // 右下角
    cvsCtx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);

    // border-bottom
    cvsCtx.lineTo(x + r, y + h);
    cvsCtx.lineTo(x, y + h - r);
    // 左下角
    cvsCtx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);

    // border-left
    cvsCtx.lineTo(x, y + r);
    cvsCtx.lineTo(x + r, y);

    // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
    cvsCtx.fill();
    // ctx.stroke()
    cvsCtx.closePath();
    // 剪切
    cvsCtx.clip();
  },
  getImage(url, tip) {
    let self = this;
    return new Promise((resolve, reject) => {
      if (url == undefined) {
        resolve('../../images/wechat.png');
        return;
      }
      wx.downloadFile({
        url: self.data.fileHost + url,
        success: function (res) {
          if (res.statusCode === 200) {
            resolve(res.tempFilePath);
          } else {
            wx.showToast({
              title: tip,
              icon: 'none',
              duration: 2000
            });
          }
        }
      });
    });
  },
  onSavePoster() {
    wx.showLoading({
      title: '正在保存',
      mask: true
    });
    let self = this;
    setTimeout(function () {
      wx.hideLoading();
      var tempFilePath = self.data.radarImg;
      wx.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success(res) {
          wx.showModal({
            content: '图片已保存到相册，赶紧晒一下吧~',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#333',
            success: function (res) {
              if (res.confirm) {
                // 返回聊天室
                wx.navigateBack();
              }
            },
            fail: function (res) {
              console.log('fail res', res);
            }
          });
        },
        fail: function (res) {
          wx.showToast({
            title: '授权失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    }, 1000);
  }
});
